:root {
  --my-btn-text-color: #C7C7CC;
  --my-btn-border-color: #0B85FE40;
  --my-span-border-color: #0B84FF44;
  --my-bg-div-color: #2C2C2E;
  --my-bg-color: #131415;
  --my-theme-color: #0B84FF;
  --my-btn-hover-color: #0B85FE60;

}

/* ==============================================================slider==================================================================== */
/* 灰色背景。不要与其他有设置宽高的类元素同时用*/
.bg_gray_div {
  width: 100%;
  height: 100%;
  background-color: var(--my-bg-div-color);
  border-radius: 5px;
  padding: 0;
}

/* ==============================================================slider==================================================================== */
/*默认是竖直的 slider  */
input[type="range"] {
  writing-mode: vertical-lr;
  /* transform: rotate(180deg); */
  direction: rtl;
  /*关键：反转值的增减逻辑*/

  /* 翻转方向 */
  /* 设置滑块竖直显示 */
  width: 16px;
  height: 86px;
  margin: 10px 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* transform: rotate(270deg);
    -webkit-transform: rotate(270deg); */
  /* 针对 Safari */
  /* margin: 10px; */
  /* 默认背景颜色设置为红色 */
  /* background: transparent; */
  /* 使用 CSS 变量控制渐变背景 */
  /* background: var(--track-color, green); */
  /* 设置默认颜色为 red，如果没有定义 --track-color 就使用 red */
  background: #1C1C1E;
  /*初始的渐变背景，已滑动部分为绿色，未滑动部分为灰色*/
  /* 让滑块占据剩余空间 */
  min-height: 10px;
  border-radius: 10px;
  border: 0.5px solid var(--my-btn-border-color);
  /* flex-grow: 1; */
}

/* Chrome / Safari 滑动轨道 */
input[type="range"]::-webkit-slider-runnable-track {
  /* width: 10px; */
  height: auto;
  /* 导轨背景色 */
  /* border-radius: 10px;
  border: 0.5px solid var(--my-btn-border-color); */
  /* 用渐变模拟进度，to top 是竖直滑动 */
  background: transparent;
}

/* Chrome / Safari 滑块 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--my-theme-color);
  /* 滑块颜色 */
  border-radius: 50%;
  border: 5px solid #EAE9EA;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Firefox 滑块 */
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--my-theme-color);
  /* 滑块颜色 */
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* IE 滑块 */
input[type="range"]::-ms-track-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--my-theme-color);
  /* 滑块颜色 */
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Firefox 滑动轨道 */
input[type="range"]::-moz-range-track {
  background: #1C1C1E;
  border-radius: 10px;
}

/*Firefox  已滑动的轨道 */
input[type="range"]::-moz-range-progress {
  background: #4caf50;
  border-radius: 10px;
}

/* IE 滑动轨道 */
input[type="range"]::-ms-track {
  background: #4caf50;
  border-radius: 10px;
}

/* IE 已滑动轨道 */
input[type="range"]::-ms-fill-lower {
  background: #4caf50;

}

/* IE 未滑动轨道 */
input[type="range"]::-ms-fill-upper {
  background: #1C1C1E;

}


/* =================================================================span================================================================= */
/*  textfield */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  text-align: center;
}

/* =================================================================span================================================================= */
/* span */
span {
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  font-size: clamp(6px, 1vw, 16px);
  text-overflow: ellipsis;
}



/* =================================================================button================================================================= */
/* button */
button {
  color: var(--my-btn-text-color);
  background-color: transparent;
  /* border: none; */
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s;
  border: 0.5px solid var(--my-span-border-color);
  display: block;
  /* 保证占满容器 */
  white-space: nowrap;
  /* 始终单行 */
  text-overflow: ellipsis;
  /* 超出显示 ... */
  font-size: clamp(10px, 1vv, 16px);
}

li a:hover,
li button:hover {
  background: var(--my-btn-hover-color);
}

li a.selected,
li a:active,
li button.selected,
li button:active {
  background: #0B85FEBB;
  background: linear-gradient(135deg, #59C7F5, #0B85FEBB);
}

li a.warning,
button.warning {
  background: linear-gradient(to bottom, #E92947, #CE1222);
  --shadow-color: #E92947;
}

/* =================================================================button================================================================= */
/* .gradient-button */
.gradient-button {
  padding: 4px;
  font-size: 16px;
  color: white;
  background: linear-gradient(135deg, #3C3C40, #1C1C1E);
  /* 渐变背景 */
  border: none;
  border-radius: 6px;
  /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 阴影 */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gradient-button:hover {
  transform: translateY(-2px);
  /* 悬浮轻微上浮 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  /* 悬浮时阴影加深 */
  background: var(--my-btn-hover-color);
}

.gradient-button:active,
.gradient-button.selected {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #59C7F5, #0B85FEBB);
}


/* =================================================================button================================================================= */
/* .auto-fit-img */
.auto-fit-img {
  width: auto;
  /* 宽度充满父容器 */
  height: auto;
  /* 高度按比例缩放 */
  object-fit: contain;
  /* 保持图片比例完整显示 */
}

.my_title1 {
  font-size: 19px;
}

/* =================================================================button================================================================= */
/* .带边框阴影的效果 */
.box-shadow:hover,
.box-shadow:active,
.box-shadow.selected,
.box-shadow.warning {
  box-shadow: 0 0 5px 2px var(--shadow-color, var(--my-theme-color));
  transition: border-color 0.2s, box-shadow 0.2s;
  /* border-radius: 50% / 100%; */
  border: none;
}

.box-shadow {
  background: var(--shadow-color, var(--my-bg-color));
}


/* =================================================================button================================================================= */
/* 高亮的字体颜色 */
.highlight-text:hover,
.highlight-text:active {
  color: var(--my-theme-color);
}

.highlight-text.selected {
  color: white;
}


/* =================================================================button================================================================= */
/* 高亮时，放大效果 */
.magnify-div:hover,
.magnify-div:active,
.magnify-div.selected,
.box-shadow.warning {
  transform: scale(1.1);
  /* 放大 1.2 倍 */
  transition: transform 0.3s ease;
  /* 平滑过渡 */
}

/* =================================================================button================================================================= */
/* 自动左右圆角切角 */
.half-radius {
  border-radius: 9999px;
  /* border-radius: 18px; */
}


/* =================================================================button================================================================= */
/* 灰色边框 */
.grey-border {
  border: 0.5px solid #97979788;
}


/* =================================================================button================================================================= */
/* 弹窗里，统一渐变色背景风格的按钮 */
.alert-gradient-bg {
  background: linear-gradient(180deg, #3A3A3D, #39393C, #262626);
}


/* =================================================================button================================================================= */
/* 特殊的，可点击的div，加select状态 */
.click_div:active,
.click_div.selected {
  background: #0B85FEBB;
  background: linear-gradient(135deg, #59C7F5, #0B85FEBB);
}

/* =================================================================button================================================================= */
/* 圆点 */
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* =================================================================button================================================================= */
/* 下拉框 */
.dropdown-menu {
  box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  padding: 0;
  background: linear-gradient(135deg, #39393C, #3A3A3D, #262626);
  display: none;
  z-index: 4;
  /* border: 0.5px solid var(--my-btn-border-color); */
  /* overflow: hidden; */
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu li {
  text-align: center;
  height: 30px;
  display: flex;
  align-items: center;
}

.dropdown-menu button:hover {
  box-shadow: 0 0 5px 2px var(--shadow-color, var(--my-theme-color));
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--my-btn-hover-color);
}

.dropdown-menu button {
  border: none;
  transition: none;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 5px;
}

.dropdown-menu button:hover img {
  content: url('../resources/arrow_right.png');
}

.dropdown-menu button img {
  position: absolute;
  right: 5px;
  /* 靠右侧距离 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中 */
}

.dropdown-menu span {
  padding-right: 20px;
  text-align: left;
  width: calc(100% - 20px);
  height: 100%;
  background: #262626;
  border-radius: 5px;
}